@charset "UTF-8";
/***** add by fuyun px-rem ******/
/***** end by fuyun px-rem ******/
/***** add by duanwanyu ******/
/*精彩生活商城，菜单展开*/
.menu-wapper {
  width: 100%;
  height: 1.33333rem;
  position: fixed;
  z-index: 100000;
  -webkit-transform: translate3d(-100%, 0, 0);
          transform: translate3d(-100%, 0, 0); }

.menu-btn {
  width: 0.85333rem;
  height: 0.93333rem;
  display: block;
  position: fixed;
  top: 0.2rem;
  right: 0;
  background: #404143 url(/resources/img/meun-btn.png) no-repeat center center;
  background-size: 0.52rem 0.52rem;
  border-top-left-radius: 7px;
  border-bottom-left-radius: 7px;
  z-index: 100001; }

.menu {
  font-size: 0.32rem;
  position: relative;
  z-index: 10;
  top: 0;
  display: -webkit-box;
  display: flex;
  width: 10rem;
  height: 1.33333rem;
  padding: 0.16rem 0 0.13333rem;
  color: #fff;
  border-top: 1px solid #c8c8cc;
  background-color: #404042; }
  .menu .tag {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
    width: 2.22222rem;
    color: #fff;
    justify-content: space-around;
    -webkit-box-align: center;
            align-items: center; }
    .menu .tag .menu_title {
      font-size: 0.32rem;
      line-height: 0.28rem;
      display: inline-block; }
    .menu .tag .menu_icon {
      margin-bottom: 0.13333rem;
      background-image: url(/resources/img/menu_icon.png);
      background-repeat: no-repeat;
      background-size: 3.14667rem .61333rem; }
    .menu .tag .menu_icon_index {
      width: .61333rem;
      height: .61333rem;
      background-position: 0 0; }
    .menu .tag .menu_icon_category {
      width: .61333rem;
      height: .61333rem;
      background-position: -1.54667rem 0; }
    .menu .tag .menu_icon_cart {
      width: .58667rem;
      height: .61333rem;
      background-position: -2.36rem 0; }
    .menu .tag .menu_icon_mine {
      width: .53333rem;
      height: .61333rem;
      background-position: -.81333rem 0; }

.animated {
  -webkit-animation-duration: .5s;
  animation-duration: .5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; }

@-webkit-keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0); } }

@keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0); } }

.slideOutRight {
  -webkit-animation-name: slideOutRight;
          animation-name: slideOutRight; }

@-webkit-keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
    visibility: visible; }
  to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); } }

@keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
    visibility: visible; }
  to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); } }

.slideInRight {
  -webkit-animation-name: slideInRight;
          animation-name: slideInRight; }
